<template>
    <el-switch
        class="switchStyle"
        v-model="dataValue"
        :disabled="disabled"
        :active-value="activeValue"
        :inactive-value="inactiveValue"
        :active-text="activeText"
        :inactive-text="inactiveText"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
    >
    </el-switch>
</template>

<script>
export default {
    name: "ESwitch",
    model: {
        prop: "value",
        event: "change",
    },
    props: {
        value: {
            type: [Number, String],
            default: 1,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        activeValue: {
            type: [Number, String],
            default: 1,
        },
        inactiveValue: {
            type: [Number, String],
            default: 2,
        },
        activeText: {
            type: String,
            default: "启用",
        },
        inactiveText: {
            type: String,
            default: "禁用",
        },
        activeColor: {
            type: String,
            default: "#1890FF",
        },
        inactiveColor: {
            type: String,
            default: "#CDCDCD",
        },
    },
    data() {
        // 这里存放数据
        return {
            // dataValue:this.value
        };
    },
    computed: {
        dataValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("change", val);
            },
        },
    },
    methods: {},
};
</script>

<style lang="scss">
.switchStyle .el-switch__label {
    position: absolute;
    display: none;
    color: #ffffff;
    font-size: 14px;
}

.el-switch__core {
    background-color: rgba(166, 166, 166, 1);
}

.switchStyle .el-switch__label--left {
    z-index: 9;
    left: 22px;
}

.switchStyle .el-switch__label--right {
    z-index: 9;
    left: -2px;
}

.switchStyle .el-switch__label.is-active {
    display: block;
}

.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 60px !important;
}
</style>
